import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { getSystemUserList } from '@/api/system'
import type { StaffDto } from '@/api/system/types'
import { JobStatusCnEnum, SexCnEnum } from '@/const/enum'
import DrawerAddMember from './DrawerAddMember'
import DrawerStaffDetail from './DrawerStaffDetail'
import { removeStaff } from '@/api/sale'
import { PlusOutlined, SearchOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Button, Image, message } from 'ant-design-vue'
import { h } from 'vue'

@Component
export class DepartmentMember extends TableRender {
    @Prop() deptId!: number
    @Prop() deptName!: string

    showAdd = false
    showDetail = false

    curStaffUserId = null as null | number

    @Watch('deptId')
    handleWatchDeptId() {
        this.reloadPage(1)
    }

    filterConfig() {
        return {
            searchText: {
                name: '',
                element: 'input',
                placeholder: '请输入成员名称/部门分组',
                params: {
                    clearable: true,
                    prefix: (
                        <SearchOutlined />
                    )
                }
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'nickName',
            title: '姓名',
            width: 100,
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams<StaffDto>) => {
                    return (
                        <div class="flex items-center gap-x-10">
                            {row.avatar && (
                                <Image
                                    width="30px"
                                    class="flex-shrink-0 w-30px h-30px rounded-full mr-5px"
                                    src={row.avatar}
                                />
                            )}
                            <div>{row.nickName}</div>
                        </div>
                    )
                }
            }
        },
        {
            field: 'phonenumber',
            title: '手机号',
            width: 110
        },
        {
            field: 'deptName',
            title: '分组',
            formatter: ({ row }) => {
                return row?.dept?.deptName || '暂无'
            }
        },
        {
            field: 'roleName',
            title: '角色',
            width: 110,
            formatter: ({ row }) => {
                return row?.roles?.[0]?.roleName || '暂无'
            }
        },
        {
            field: 'sex',
            title: '性别',
            formatter: ({ row }) => {
                return SexCnEnum[row.sex as keyof typeof SexCnEnum]
            }
        },
        {
            field: 'entryTime',
            title: '入职时间',
            params: {
                format: 'YYYY-MM-DD'
            },
            width: 100,
            slots: {
                default: 'dateformat'
            }
        },
        {
            field: 'status',
            title: '状态',
            formatter: ({ row }: VxeColumnSlotTypes.ContentSlotParams<StaffDto>) => {
                return JobStatusCnEnum[row.status as keyof typeof JobStatusCnEnum]
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 150,
            params: {
                buttons: [
                    {
                        type: 'primary',
                        text: '详情',
                        event: (row: StaffDto) => this.onShowDetail(row)
                    },
                    {
                        type: 'primary',
                        text: '修改',
                        event: (row: StaffDto) => this.onEdit(row)
                    },
                    {
                        hidden: (row: StaffDto) => {
                            return row.status === '0'
                        },
                        type: 'danger',
                        text: '删除',
                        event: async (row: StaffDto) => {
                            await removeStaff({
                                userId: row.userId
                            })
                            message.success('删除成功')
                            this.reloadPage()
                        }
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<StaffDto>

    onShowAdd() {
        this.showAdd = true
    }

    onEdit(row: StaffDto) {
        this.curStaffUserId = row.userId
        this.showAdd = true
    }
    onShowDetail(row: StaffDto) {
        this.curStaffUserId = row.userId
        this.showDetail = true
    }

    onToDepartMember() {
        this.$router.push({
            path: '/system/department-member'
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getSystemUserList({
            pageNum: page,
            pageSize: size,
            deptId: this.deptId || null,
            ...filters
        })
    }

    renderTitle() {
        return (
            <div class="flex justify-between px-20px pt-20px">
                <div class="font-bold text-xl">{this.deptName ?? '全部组员列表'}</div>
                <div>
                    <Button icon={h(UserOutlined)} type="link" onClick={this.onToDepartMember}>
                        已离职成员
                    </Button>
                </div>
            </div>
        )
    }

    renderToolbar() {
        return (
            <div class="flex justify-between w-full px-20px">
                <div class="flex items-center">
                    <UserOutlined />
                    <span class="text-blue-default">{this.total}名</span>成员
                </div>
                <Button icon={h(PlusOutlined)} type="primary" onClick={this.onShowAdd}>
                    新建员工
                </Button>
            </div>
        )
    }

    render() {
        return (
            <div class="h-full">
                <div class="border-1 border-solid rounded-sm flex-1 h-full">{super.render()}</div>
                <DrawerAddMember
                    v-model:show={this.showAdd}
                    userId={this.curStaffUserId}
                    onRefresh={this.reloadPage}
                />
                <DrawerStaffDetail
                    v-model:show={this.showDetail}
                    userId={this.curStaffUserId as number}
                    onRefresh={this.reloadPage}
                />
            </div>
        )
    }
}

export default toNative<{ deptId: number; deptName: string }, {}>(DepartmentMember)
